import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import { Chart, Interval, Tooltip } from 'bizcharts';
import * as echarts from 'echarts';

class yearAnalysisChart extends Component {
    constructor(props) {
        super(props),
            this.state = {
                option: {
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'bar'
                        }
                    ]
                }
            }
    }

    componentDidMount() {
        let xData = []
        let yData = []
        let _option = JSON.parse(JSON.stringify(this.state.option))
        for (let i in this.props.yearAnalysisChartData) {
            xData.push(this.props.yearAnalysisChartData[i].year)
            yData.push(this.props.yearAnalysisChartData[i].value)
        }
        _option.xAxis.data = xData
        _option.series[0].data = yData
        this.setState({
            option: _option
        }, () => {
            var chartDom = document.getElementById('yearAnalysisChart');
            var myChart = echarts.init(chartDom);
            myChart.setOption(this.state.option);
        })
    }

    render() {
        return (
            // <Chart height={700} autoFit data={this.props.yearAnalysisChartData} interactions={['active-region']} padding={[30, 30, 30, 50]} >
            //     <Interval position="year*value" />
            //     <Tooltip shared />
            // </Chart>
            <div id="yearAnalysisChart" style={{ height: 500, width: this.state.option.xAxis.data.length < 3 ? 400 : 700 }}></div>
        )
    }
}

const mapStateToProps = state => {
    let yearAnalysisChartData = state.patentData.yearAnalysisChartData
    console.log(yearAnalysisChartData)
    return {
        yearAnalysisChartData
    }
}

export default connect(mapStateToProps)(yearAnalysisChart)